<template>
  <div class="total-pie-special-label">
    <div id="echart1" class="account-display-echart" ref="pieChart"></div>
    <!--    <div id="chart-container"></div>-->
  </div>
</template>

<script>
  import { Chart, Util } from '@antv/g2'

  export default {
    name: 'TotalPieSpecialLabel',
    data () {
      return {
        initEchart: '',
        totalData: {},
        isData: false,
        option: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
            left: '6%',
            right: '4%',
            bottom: '3%',
            width: '500'
          },
          legend: {
            orient: 'vertical',
            top: 'middle',
            left: 10,
            data: ['参与未推广', '推广未完成', '完成任务']
          },
          series: [
            {
              name: '活动完成情况统计',
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      }
    },
    methods: {
      init (res) {
        this.isData = res.length !== 0
        this.formatData(res)
        console.log(this.option)
        const pieChart = window.echarts.init(this.$refs.pieChart, 'walden')
        pieChart.setOption(this.option)
        // this.initChart(res)
      },
      formatData (totalData) {
        this.option.series[0].data = []
        totalData.forEach(item => {
          this.option.series[0].data.push({ value: item.joinCount, name: item.name })
          // this.option.series[0].data.push({ value: item.value, name: item.name, itemStyle: { color: '#ff688e' } })
          if (item.joinCount === 0 && this.isData) {
            this.isData = false
          }
        })
      },
      initChart (res) {
        // const data = [
        //   { type: '一线城市', value: 0.19 },
        //   { type: '二线城市', value: 0.21 },
        //   { type: '三线城市', value: 0.27 },
        //   { type: '四线及以下', value: 0.33 }
        // ]

        // 格式化初始数据
        const data = res.map(item => {
          return {
            type: item.name,
            value: item.joinCount
          }
        })
        // 初始化图标区域
        const chart = new Chart({
          container: 'chart-container',
          autoFit: true,
          height: 340
        })
        // 数据赋值
        chart.data(data)
        // 调整坐标轴
        chart.coordinate('theta', {
          radius: 0.75
        })
        // 调整提示信息
        chart.tooltip({
          showMarkers: false
        })
        // 编写图标绘制信息
        chart
          .interval()
          // 调整
          .adjust('stack')
          // 定义数据值
          .position('value')
          .color('type')
          .state({
            active: {
              style: (element) => {
                const shape = element.shape
                return {
                  matrix: Util.zoom(shape, 1.1)
                }
              }
            }
          })
          .label('type', (val) => {
            return {
              offset: -30,
              style: {
                fill: 'white',
                fontSize: 14
              },
              content: (obj) => {
                return obj.value
              }
            }
          })

        chart.interaction('element-single-selected')

        chart.render()
      }
    }
  }
</script>

<style lang="less">
  .total-pie-special-label {
    padding: 0 20px;
    height: 340px;
    min-width: 600px;
    background: white;
    overflow: hidden;

    .total-pie-special-label-title {
      border-bottom: 1px solid #f0f0f0;
      padding: 15px 0;
    }

    .no-data {
      width: 600px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #909399;
    }

    .account-display-echart {
      width: 600px;
      min-height: 250px;
    }
  }
</style>
